{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'css/global.css' %}">
    <link rel="stylesheet" href="{% static 'css/prevention.css' %}">
    <title>covid-19_2.0</title>
</head>
<body class="bg">
<header class="top">
    <ul class="top-nav clearfix">
        <li><a href="/index">首页<br>Home</a></li>
        <li><a href="/prediction">&nbsp;预测系统<br>Prediction</a></li>
        <li><a href="/news">&nbsp;&nbsp;新闻报道<br>News Report</a></li>
        <li><a href="/research">相关研究<br>Research</a></li>
        <li><a href="/prevention">预防措施<br>Prevent</a></li>
        <li><a href="/platform">关于平台<br>Platform</a></li>
        <li><a href="/contact">&nbsp;联系我们<br>Connect us</a></li>
    </ul>
</header>

<section style="color: white">
    <div id="father" class="container">
        <div class="section section-1">
            <img src="{% static 'img/研究1.jpg' %}" alt="">
            <div>
<!--                <a href="iframe/prevention_1" target="main">戴口罩的姿势要正确！专家教你如何选择、佩戴及处理</a>-->
                <button type="button" onclick="loadXMLDoc11()">戴口罩的姿势要正确！专家教你如何选择、佩戴及处理</button>
            </div>
        </div>
        <div class="section section-2">
            <img src="{% static 'img/研究2.jpg' %}" alt="">
            <div>
                <button type="button" onclick="loadXMLDoc22()">戴口罩的姿势要正确！专家教你如何选择、佩戴及处理</button>
            </div>
        </div>
        <div class="section section-3">
            <img src="{% static 'img/研究3.jpg' %}" alt="">
            <div>
                <button type="button" onclick="loadXMLDoc33()">戴口罩的姿势要正确！专家教你如何选择、佩戴及处理</button>
            </div>
        </div>
        <div class="section section-4">
            <img src="{% static 'img/研究4.jpg' %}" alt="">
            <div>
                <button type="button" onclick="loadXMLDoc44()">戴口罩的姿势要正确！专家教你如何选择、佩戴及处理</button>
            </div>
        </div>
    </div>
</section>

<!--<iframe src="iframe/prevention_1" name="main" frameboder="0"></iframe>-->
<!--<object data="iframe/prevention_1" name="main" type="text/html"></object>-->
<div id="myDiv" class="myDiv"><h3>点击显示内容</h3></div>

<script>
    function loadXMLDoc11() {
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","iframe/prevention_1",true);
        xmlhttp.send();
    }
    function loadXMLDoc22() {
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","iframe/prevention_2",true);
        xmlhttp.send();
    }
    function loadXMLDoc33() {
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","iframe/prevention_3",true);
        xmlhttp.send();
    }
    function loadXMLDoc44() {
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }
        else{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","iframe/prevention_4",true);
        xmlhttp.send();
    }
</script>

<script charset="utf-8" src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script>/*鼠标滚动导航栏特效无响应，但换成window就可以相应，大概问题就是滚动贴合的时候父容器是father而不是window，但不知道为什么换成father也无响应*/
window.addEventListener('scroll', function () {
    console.log('1111');
    let top = document.querySelector('.top');
    if ( window.scrollY > 0) {
        console.log('2222');
        top.classList.add("bian");
    } else {
        top.classList.remove("bian");
        console.log('3333');
    }
})
</script>
</body>
</html>